<template>
  <div class="box">
    <div class="top">
      <div class="head">
        <span>完成个人信息填写,即将开启</span>
        <span class="word">求职之旅</span>
      </div>
      <!-- 进度条 -->
      <div class="progress_bar">
        <el-steps :active="active" finish-status="success">
          <el-step title="基础信息"></el-step>
          <el-step title="学习"></el-step>
          <el-step title="工作"></el-step>
          <el-step title="求职意向"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px" @click="next" v-show="active != 4"
          >下一步</el-button
        >
        <el-button style="margin-top: 12px" @click="last" v-show="active == 4"
          >上一步</el-button
        >
      </div>
    </div>
    <div class="main">
      <!-- contentOne为一个内容，里面有content(title,form(left,right)) -->
      <!-- 内容部分 -->
      <div class="contentOne" v-show="active == 0">
        <!-- 内容 -->
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>基础信息</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="name"><span>*</span>姓名</label>
              <input
                v-model="name"
                type="text"
                name="name"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="yearMonth"><span>*</span>出生年月</label>
              <!-- <input
                v-model="gender"
                type="text"
                name="gender"
                required=""
                autocomplete="off"
                class="input"
              /> -->
              <div class="like-input" >
                <el-date-picker
                  v-model="yearMonth"
                  type="month"
                  placeholder="选择出生日期"
                  value-format="yyyy-MM"
                  style="display: inline-block; width: 100%;height:20px;"
                >
                  >
                </el-date-picker>
              </div>
              <label for="currentAddress"><span>*</span>现居地址</label>
              <input
                v-model="currentAddress"
                type="text"
                name="currentAddress"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
            <div class="right">
              <label for="gender"><span>*</span>性别</label>
              <!-- <input
                v-model="gender"
                type="text"
                name="gender"
                required=""
                autocomplete="off"
                class="input"
              /> -->
              <el-form ref="form" label-width="0px" class="like-input">
                <el-radio-group
                  v-model="gender"
                  style="
                      display: flex;
                      width: 100%;
                      height:100%;
                      justify-content:space-around;
                      align-content:center;
                      align-items:center;
                    "
                >
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form>
              

              <label for="homeAddress"><span>*</span>户籍地址</label>
              <input
                v-model="homeAddress"
                type="text"
                name="homeAddress"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
          </div>
          <!-- 联系人 -->
        </div>
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>联系方式</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="phone"><span>*</span>电话</label>
              <input
                v-model="phone"
                type="text"
                name="phone"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>

            <div class="right">
              <label for="email"><span>*</span>电子邮箱</label>
              <input
                v-model="email"
                type="text"
                name="email"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="contentTwo" v-show="active == 1">
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>教育经历</span>
          </div>
          <div class="form">
            <div class="left">
               <label for="school"><span>*</span>就读学校</label>
              <input
                v-model="school"
                type="text"
                name="school"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="startTime"><span>*</span>就读时间</label>
              <!-- <input
                v-model="startTime"
                type="text"
                name="startTime"
                required=""
                autocomplete="off"
                class="input"
              /> -->
              <div class='two-input'>
               
                  <el-date-picker
                  v-model=" startTime"
                  type="month"
                  placeholder="选择开始时间"
                  value-format="yyyy-MM"
                  style="display: inline-block; width:48%;text-align:center;">
                  >
                </el-date-picker>  
               <span  class='one' >-</span>
                 
                    <el-date-picker
                  v-model="endTime"
                  type="month"
                  placeholder="选择毕业时间"
                  value-format="yyyy-MM"
                  style="display: inline-block; width: 48%">
                  >
                </el-date-picker>  
                 
              </div>
             
              
            </div>
            <div class="right">
             
              <label for="major"><span>*</span>就读专业</label>
              <input
                v-model="major"
                type="text"
                name="major"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="education"><span>*</span>学历</label>
              <!-- <input
                v-model="education"
                type="text"
                name="education"
                required=""
                autocomplete="off"
                class="input"
              /> -->
               <div  class='like-input' style="dispaly: inline-block; width: 100% ;">
                <el-form >
                  <el-select 
                    v-model="education"
                    placeholder="请选择您的学历"
                   style="dispaly: inline-block; width: 100%;height:100%;"
                  >
                   <el-option label="专科以下" value="专科以下"></el-option>
                    <el-option label="专科" value="专科"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                     <el-option label="硕士研究生" value="硕士研究生"></el-option>
                      <el-option label="博士研究生" value="博士研究生"></el-option>
                  </el-select>
              </el-form>
              </div>
            </div>
          </div>
        </div>
        <!-- 证书部分 -->
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>证书</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="certificate"><span>*</span>证书名称</label>
              <input
                v-model="certificate"
                type="text"
                name="certificate"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
            <div class="right">
              <label for="obtainTime"><span>*</span>获得时间</label>
             
                <div class="like-input"  style="display: inline-block;" >
                <el-date-picker
                  v-model="obtainTime"
                  type="month"
                  placeholder="选择日期"
                  value-format="yyyy-MM"
                  style="display: inline-block; width:100%;margin-right:10px;
                 "
                >
                  >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <!-- 技能部分 -->
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>技能</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="skill"><span>*</span>技能</label>
              <input
                v-model="skill"
                type="text"
                name="skill"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
            <div class="right">
              <label for="skill_status"><span>*</span>掌握情况</label>
              
              <div  class='like-input' style="dispaly: inline-block; width: 100% ;">
                <el-form >
                  <el-select 
                    v-model="skill_status"
                    placeholder="请选择您的职位"
                   style="dispaly: inline-block; width: 100%;height:100%;"
                  >
                   <el-option label="一般" value="专科以下"></el-option>
                    <el-option label="熟练" value="专科"></el-option>
                   
                  </el-select>
              </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="contentThree" v-show="active == 2">
        <div class="content" style='dispaly:inline-block;height:80px' >
          <div class="title">
            <span class="bar"></span>
            <span>您的身份</span>
          </div>
          <div class="form" style="margin-top: 8px">
            <div class="left" >
              <!-- <input
                v-model="identity"
                type="text"
                name="identity"
                required=""
                autocomplete="off"
                class="input"
              /> -->
              <el-form ref="form" label-width="0px" class="like-input">
                <el-radio-group
                  v-model="identity"
                  style="
                      display: flex;
                      width: 100%;
                      height:100%;
                      justify-content:space-around;
                      align-content:center;
                      align-items:center;

                    "
                >
                  <el-radio label="应届生"></el-radio>
                  <el-radio label="往届生"></el-radio>
                   <el-radio label="职场人"></el-radio>
                </el-radio-group>
              </el-form>
            </div>
            <div class="right">
              <label for="certificate" style="visibility: hidden"
                ><span>*</span>////</label
              >
              <input
                style="visibility: hidden"
                v-model="certificate"
                type="text"
                name="certificate"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
          </div>
        </div>
        <!-- 工作经历 -->
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>工作经历</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="comName"><span>*</span>公司名称</label>
              <input
                v-model="comName"
                type="text"
                name="comName"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="workStart"><span>*</span>工作时间</label>
            
               <div class='two-input'>
               
                  <el-date-picker
                  v-model=" workStart"
                  type="month"
                  placeholder="选择入职时间"
                  value-format="yyyy-MM"
                  style="display: inline-block; width:48%;text-align:center;">
                  >
                </el-date-picker>  
               <span  class='one' >-</span>
                 
                    <el-date-picker
                  v-model="workEnd"
                  type="month"
                  placeholder="选择离职时间"
                  value-format="yyyy-MM"
                  style="display: inline-block; width: 48%">
                  >
                </el-date-picker>  
                 
              </div>
            </div>

            <div class="right">
              <label for="position"><span>*</span>工作职位</label>
              <input
                v-model="position"
                type="text"
                name="position"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="certificate" style="visibility: hidden"
                ><span>*</span>////</label
              >
              <input
                style="visibility: hidden"
                v-model="certificate"
                type="text"
                name="certificate"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
          </div>

          <div class="long">
            <label for="workContent"><span>*</span>工作内容</label>
            <textarea
              style='padding-top:10px;'
              placeholder="您可以详细描述—下您的职责范围，工作任务及取得的成绩等"
              v-model="workContent"
              wrap="hard"
              autocomplete="off"
              name="workContent"
              required=""
              type="text"
            
            >
                请输入内容
              </textarea
            >
          </div>
        </div>
        <!-- 项目经历 -->
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>项目经历</span>
          </div>
          <div class="all">
            <input
              v-model="projectEx"
              type="text"
              name="projectEx"
              required=""
              autocomplete="off"
              class="input"
              placeholder=" 添加项目经历"
            />
          </div>
          <div class="form"></div>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="contentFour" v-show="active == 3">
        <div class="content">
          <div class="title">
            <span class="bar"></span>
            <span>求职意向</span>
          </div>
          <div class="form">
            <div class="left">
              <label for="workCharacter"><span>*</span>工作性质</label>
              <input
                v-model="workCharacter"
                type="text"
                name="workCharacter"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="exSalary"><span>*</span>期望薪资</label>
              <input
                v-model="exSalary"
                type="text"
                name="exSalary"
                required=""
                autocomplete="off"
                class="input"
              />
              <label for="exAddress"><span>*</span> 期望地点</label>
              <input
                v-model="exAddress"
                type="text"
                name="exAddress"
                required=""
                autocomplete="off"
                class="input"
              />
            </div>
            <div class="right">
              <label for="exStatus "><span>*</span>目前求职状态</label>
               <div  class='like-input' style="dispaly: inline-block; width: 100% ;">
                <el-form >
                  <el-select 
                    v-model="exStatus"
                    placeholder="请选择您的职位"
                   style="dispaly: inline-block; width: 100%;height:100%;"
                  >
                   <el-option label="离校-随时到岗" value="离校-随时到岗"></el-option>
                    <el-option label="离校-月内到岗" value="离校-月内到岗"></el-option>
                    <el-option label="离校-暂不考虑" value="离校-暂不考虑"></el-option>
                     <el-option label="在校-随时到岗" value="在校-随时到岗"></el-option>
                     <el-option label="在校-月内到岗" value="在校-月内到岗"></el-option>
                      <el-option label="在校-暂不考虑" value="在校-暂不考虑"></el-option>
                  </el-select>
              </el-form>
              </div>
              <label for="exPosition "><span>*</span> 期望职位</label>
             
              <input
                v-model="exPosition"
                type="text"
                name="exPosition"
                required=""
                autocomplete="off"
                clas
                s="input"
              />
            </div>
          </div>
          <div class="long">
            <label for="advantage"><span>*</span>个人优势</label>
            <textarea
              placeholder="您可以详细描述—下您的优势"
              v-model="advantage"
              wrap="hard"
              autocomplete="off"
              name="advantage"
              required=""
              type="text"
              style='padding-top:10px;'
            >
                请输入您的内容
              </textarea
            >
          </div>
        </div>
      </div>
       <!-- 第五部分完成认证 -->
      <div class="contenThree" v-show="active ==4">
        <div class="success_box">
          <div class="img"></div>
          <div class="words">
            点击<span class="button_words" @click="toHome">立即体验</span
            >后即将进入招聘网
          </div>
          <div class="words">您的基础信也会自动提交~</div>
          <div class="words">祝您应聘愉快~~</div>
        </div>
      </div>
      <!-- 底部按钮部分 -->
      <div class="bottom" @click="next" v-show="active == 0">下一步</div>
      <div class="bottom_new" v-show="active != 0 && active != 4">
        <div @click="last" class="last">上一步</div>
        <div @click="next" class="next">下一步</div>
      </div>
      <!-- <div class="bottom_last" @click="last" v-show="active == 3">上一步</div> -->
      <div class="bottom_new" v-show="active == 4">
          <div @click="last" class="last">上一步</div>
          <div @click="toHome" class="next">立即体验</div>
        </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      name: "",
      gender: "",
      yearMonth: "",
      homeAddress: "",
      currentAddress: "",
      phone: "",
      email: "",
      startTime: "",
      endTime: "",
      //学历
      education: "",
      //专业
      major: "",
      school: "",
      //证书名称
      certificate: "",
      //获得证书时间,、
      obtainTime: "",
      skill: "",
      skill_status: "",
      //公司名称
      comName: "",
      position: "",
      workStart: "",
      workEnd:'',
      identity: "",
      workContent: "",
      projectEx: "",
      workCharacter: "",
      exAddress: "",
      exPosition: "",
      exStatus: "",
      exSalary: "",
      advantage: "",
    };
  },

  methods: {
    next() {
      if (this.active++ > 3) this.active = 0;
    },
    last() {
      if (this.active-- <= 0) this.active = 0;
    },
    toHome() {
      this.$router.push("/home");
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {
  // margin: 5px;
  width: 100%;

  background: #f0f0f0;
  border-radius: 10px;
  border: none;
  color:black;

  font-size: 16px;
  letter-spacing: 1px;
   
}
.box {
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(158, 178, 210),
    rgba(76, 108, 154, 1)
  ); /* 标准的语法 */
  .top {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: auto;
    background: white;
    border-radius: 5px;
    padding: 0 10px 0 10px;
    background: rgb(247, 249, 250);
    .head {
      height: 60px;
      font-size: 18px;

      padding: 0px;
      line-height: 60px;

      font-weight: bold;
      .word {
        color: rgba(76, 108, 154, 1);
      }
    }
    .progress_bar {
      padding-top: 5px;
      padding-bottom: 8px;
      // background:red;
      border-bottom: 3px solid rgb(245, 245, 246);
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      // border-image: linear-gradient(transparent,black, transparent)1 1;
      background: rgb(247, 249, 250);
    }
  }

  .main {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: auto;
    background: white;
    border-radius: 5px;
    padding: 0 10px 0 10px;

    .content {
      .title {
        display: flex;
        align-items: center;
        margin-top: 8px;
        font-weight: bold;

        .bar {
          width: 3px;
          height: 16px;
          background: black;
          margin-right: 6px;
        }
      }
      .long {
        width: 100%;
        height: auto;
        flex-direction: column;
        span {
          color: red;
          display: inline-block;
          padding-left: 4px;
          padding-right: 3px;
        }
        textarea {
          width: 95%;
        
          display: inline-block;
          min-height: 105px;
          margin: 5px;
          //字不贴边
          padding-left: 10px;
          font-size: 16px;

          letter-spacing: 1px;
          /*字符间的间距1px*/
          // margin-bottom: 30px;
          border: none;
          border-bottom: 1px solid #fff;
          border-radius: 10px;
          outline: none;
          /*outline用于绘制元素周围的线*/
          // background: transparent;
          background: rgba(240, 240, 240, 1);
          line-height: 16px;
        }
      }
      .form {
        width: 100%;
        height: auto;
        display: flex;
        margin-top: 8px;
        color: black;
        justify-content: space-between;

        .right {
          // flex-grow: 1;
          display: flex;
           width: 40%;
          flex-direction: column;
          margin-right:10px;
          span {
            color: red;
            display: inline-block;
            padding-left: 4px;
            padding-right: 3px;
          }
          input {
            display: inline-block;
            width: 100%;
            height: 40px;
            margin: 5px;
            //字不贴边
            padding-left: 10px;
            font-size: 16px;

            letter-spacing: 1px;
            /*字符间的间距1px*/
            // margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 10px;
            outline: none;
            /*outline用于绘制元素周围的线*/
            // background: transparent;
            background: rgba(240, 240, 240, 1);
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
          }
          .like-input {
            display: inline-block;
            width: 100%;
            height: 40px;
            margin: 5px;
            //字不贴边
            padding-left: 10px;
            font-size: 16px;
            letter-spacing: 1px;
            /*字符间的间距1px*/
            // margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 10px;
            outline: none;
            /*outline用于绘制元素周围的线*/
            // background: transparent;
            background: rgba(240, 240, 240, 1);
             box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
          }
         
        }
        .left {
          // flex-grow: 1;

          display: flex;
          width: 40%;
          flex-direction: column;
          margin-left:10px;
          span {
            color: red;
            display: inline-block;
            padding-left: 4px;
            padding-right: 3px;
          }
          input {
            display: inline-block;
            width: 100%;
            height: 40px;
            margin: 5px;
            //字不贴边
            padding-left: 10px;
            font-size: 16px;
            letter-spacing: 1px;
            /*字符间的间距1px*/
            // margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 10px;
            outline: none;
            /*outline用于绘制元素周围的线*/
            // background: transparent;
            background: rgba(240, 240, 240, 1);
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
          }
           .like-input {
            display: inline-block;
            width: 98%;
            height: 40px;
            margin: 5px;
            //字不贴边
            padding-left: 10px;
            font-size: 16px;
            letter-spacing: 1px;
            /*字符间的间距1px*/
            // margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 10px;
            outline: none;
            /*outline用于绘制元素周围的线*/
            // background: transparent;
            background: rgba(240, 240, 240, 1);
             
          }
           .two-input{
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            width: 100%;
            height: 40px;
            margin: 5px;
            // background:red;
      
            .one{
              display:inline-block;
              width:4%;padding:0px;
              text-align:center;
              line-height:40px;
              color:black



            }
          }
        }
      }
      .all {
        width: 100%;
        input {
          width: 95%;
          display: inline-block;
          height: 40px;
          margin: 5px;
          //字不贴边
          padding-left: 10px;
          font-size: 16px;

          letter-spacing: 1px;
          /*字符间的间距1px*/
          // margin-bottom: 30px;
          border: none;
          border-bottom: 1px solid #fff;
          border-radius: 10px;
          outline: none;
          /*outline用于绘制元素周围的线*/
          // background: transparent;
          background: rgba(240, 240, 240, 1);
        }
      }
    }
    .success_box {
      margin-top: 50px;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        height: 100px;
        width: 100px;
        background: url("../../assets/img/success.png") no-repeat;
        background-size: cover;
        margin-bottom: 40px;
      }
      .words {
        margin-bottom: 15px;
        line-height: 30px;
        font-size: 16px;
        letter-spacing: 2px;
        color: #888;
      }
      .button_words {
        color: rgb(38, 156, 228);
        cursor: pointer;
      }
      .button_words:hover {
        text-decoration: underline;
      }
    }
    .bottom {
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border: solid 1px rgb(240, 240, 240);
      border-radius: 5px;
      margin: 10px 0 10px 0;
      cursor: pointer;
      background: rgb(210, 227, 250);
    }
    .bottom:hover {
      border: solid 1px rgb(82, 113, 258);
      background: rgb(153, 174, 204);
    }
    .bottom_new {
      width: 100%;
      height: 35px;
      background: transparent;
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      margin: 10px 0 10px 0;
      .last {
        flex-grow: 1;
        text-align: center;
        height: 100%;
        width: 100%;
        line-height: 35px;
        border: solid 1px rgb(240, 240, 240);
        border-radius: 5px;

        cursor: pointer;
        background: rgb(210, 227, 250);
        margin-bottom: 10px;
      }
      .last:hover {
        border: solid 1px rgb(82, 113, 258);
        background: rgb(153, 174, 204);
      }
      .next {
        flex-grow: 1;
        text-align: center;
        width: 100%;
        height: 100%;
        line-height: 35px;
        border: solid 1px rgb(240, 240, 240);
        border-radius: 5px;

        cursor: pointer;
        background: rgb(210, 227, 250);
      }
      .next:hover {
        border: solid 1px rgb(82, 113, 258);
        background: rgb(153, 174, 204);
      }
    }
    .bottom_last {
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border: solid 1px rgb(240, 240, 240);
      border-radius: 5px;
      margin: 10px 0 10px 0;
      cursor: pointer;
      background: rgb(210, 227, 250);
    }
    .bottom_last:hover {
      border: solid 1px rgb(82, 113, 258);
      background: rgb(153, 174, 204);
    }
  }
}
</style>
